<template>
	<div class="drawer_box">
		<div class="isTable flex_start_start">
			<el-table :data="CriminalInfoSelectList" border fit highlight-current-row stripe style="width: 100%">
				<el-table-column type="index" align="center" width="60" label="序号">
				</el-table-column>
				<el-table-column label="监区" align="center">
					<template #default="scope">
						<span>{{ scope.row.names }}</span>
					</template>
				</el-table-column>

				<el-table-column label="刑满罪犯" align="center">
					<template #default="scope">
						<div v-if="getText(scope.row)">
							<span v-for="(item,index) in getText(scope.row)" :key="index">
								<span style="display: inline-block; margin-right: 2px;"> {{ item.names }} </span>
								<span v-if="item.endDate">（{{ item.endDate }}）</span>
							</span>
						</div>

					</template>
				</el-table-column>

			</el-table>
		</div>
	</div>
</template>

<script setup>
	import http from "@/utils/api";
	import {
		Search,
		Back,
	} from "@element-plus/icons-vue";
	import {
		ref,
		watch,
	} from "vue";
	import {
		defineProps,
		defineEmits
	} from "vue";

	const props = defineProps({
		orgIds: {
			type: Object,
			default: {},
		},
		jqArr: {
			type: Array,
			default: [],
		},
	});
	let CriminalInfoSelectList = ref([]);


	let dateSfm = ref("");
	let hour = ref("");
	let daydata = ref("");
	let value3 = ref("");
	let years = ref("");
	let months = ref("");
	let dateArr = ref([]);
	// 获取年月日 时
	const getFormattedDateTime = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, "0");
		const day = String(now.getDate()).padStart(2, "0");
		const hours = String(now.getHours()).padStart(2, "0");
		const minutes = String(now.getMinutes()).padStart(2, "0");
		const seconds = String(now.getSeconds()).padStart(2, "0");
		dateSfm.value = `${hours}:${minutes}:${seconds}`;
		hour.value = String(now.getHours()).padStart(2, "0");
		daydata.value = `${year}-${month}-${day}`;
		years.value = `${year}`;
		months.value = `${month}`;
		return `${year}-${month}-${day} ${hour.value}`;
	};

	let xmArr = ref([]);

	const getCriminalInfoSelect = async () => {
		let res = await http.znjw.CriminalZr({
			date: value3.value,
			orgId: sessionStorage.getItem("orgIds"),
		});
		if (res && res.code == 0) {
			let arr = JSON.parse(sessionStorage.getItem("jqArr")).filter((item) => item.name.includes("监区")).map((
				item) => {
				return {
					names: item.name,
					id: item.id,
				};
			});
			xmArr.value = res.data;
			CriminalInfoSelectList.value = arr;
		}
	};
	let jqArrCv = ref([]);

	const getText = (row, is) => {
		let str = "";
		let arr = []
		arr = xmArr.value.map((itz) => {
			if (
				itz.orgId == row.id
			) {
				return {
					names: itz.name,
					endDate: itz.endDate ? itz.endDate.split('T')[0] + ' ' + itz.endDate.split('T')[1] : ''
				}

			}
		}).filter((item) => item)
		if (!arr.length) {
			arr = str
		}


		return arr;
	};


	const getMonthDates = () => {
		const now = new Date();
		const year = Number(years.value);
		const month = Number(months.value); // 注意：月份从0开始，所以11表示12月
		// 获取当前月的天数
		const daysInMonth = new Date(year, month, 0).getDate();
		// 生成日期数组
		const dates = [];
		for (let day = 1; day <= daysInMonth; day++) {
			const dateString = `${year}-${String(month).padStart(2, "0")}-${String(
        day
      ).padStart(2, "0")}`;
			dates.push({
				date: dateString,
				is: false,
			});
		}

		dateArr.value = dates;
		dateArr.value.forEach((item) => {
			if (item.date == daydata.value) {
				item.is = true;
			}
		});
		getCriminalInfoSelect();
	};

	watch(
		() => props.jqArr,
		(newValue, oldValue) => {
			if (newValue) {
				getFormattedDateTime();
				value3.value = daydata.value;

				getMonthDates();
				if (props.jqArr) {
					jqArrCv.value = JSON.parse(JSON.stringify(props.jqArr));
					let allJq = jqArrCv.value.map((itz) => itz.id);
					let allObj = {
						name: JSON.parse(sessionStorage.getItem("userInfo")).unitName,
						id: allJq.join(","),
					};
					jqArrCv.value.unshift(allObj);
				}
				getCriminalInfoSelect();
			} else {}
		}, {
			deep: true, // 深度监听
			immediate: true, // 立即触发回调
		}
	);
</script>

<style scoped lang="scss">
	::v-deep .date_searchbox {
		display: none;

		.el-input__wrapper {
			background-color: rgba(15, 82, 163, 0.278);
			box-shadow: (0 0 0 1px rgba(15, 82, 163, 0.61)) inset;
		}

		.el-input__inner {
			color: white;
		}

		.el-input__prefix {
			color: white;
		}
	}

	.isAtv {
		background-color: rgb(4 110 250 / 27%) !important;
		font-weight: bold;
	}

	/**
    分页样式
     */
	::v-deep .example-pagination-block {
		margin-top: 10px;
		margin-left: 230px;

		.el-pagination.is-background .btn-prev {
			background-color: #34517d3b;
			color: #ffffff;
		}

		.el-pagination.is-background .el-pager li {
			background-color: #34517d3b;
			color: #ffffff;
		}

		.el-pagination.is-background .btn-next {
			background-color: #34517d3b;
			color: #ffffff;
		}

		.el-pagination__total {
			color: #ffffff;
		}

		.el-pager li.is-active {
			background-color: #0768f9d3 !important;
		}
	}

	.btn_box {
		width: 10%;
		height: 100%;
		font-size: 16px;
		color: #fff;
		margin-right: 2px;

		.itemz {
			width: 100%;
			height: 30px;
			font-size: 14px;
			cursor: pointer;
			border: 1px solid rgb(5, 112, 146);
			// border-bottom: none;
			border-radius: 4px;
			margin-bottom: 2px;
		}

		.itemz:hover {
			font-weight: bold;
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1),
				1px 1px 1px rgba(255, 255, 255, 0.3), 1px 1px 1vmax rgba(0, 0, 0, 0.1);
		}
	}

	::v-deep .isTable .el-table {
		background-color: rgb(8, 32, 78) !important;

		.el-table tr {
			background-color: rgb(8, 32, 78) !important;
		}

		.cell {
			height: auto;
			color: #fff;
			text-align: center;
			// border: 1px solid #ccc;
			background: rgb(8, 32, 78) !important;
			font-size: 12px;
			line-height: 32px;
		}

		.el-table__cell {
			border-color: 1px solid rgb(5, 112, 146);
			padding: 2px 0px !important;
			background: rgb(8, 32, 78) !important;
		}

		.el-table--fit .el-table__inner-wrapper:before {
			display: none !important;
		}

		.el-table th.el-table__cell.is-leaf {
			border: none !important;
		}

		--el-table-border-color: rgb(5, 112, 146);
	}

	.drawer_box {
		width: 100%;
		height: 100%;
		position: relative;
		padding: 10px 10px;

		.drawer_text {
			position: absolute;
			top: -23px;
			left: 2px;
			font-size: 18px;
		}
	}
</style>